# Column Layout
## Examples
### Columns and Spans
The span property can be set to vary the width of the Columns. The spans must add up to 12. The Columns are colored for this example.
```typescript
import React from 'react';
import ColumnLayout from '@splunk/react-ui/ColumnLayout';
import { useSplunkTheme } from '@splunk/themes';
function Basic() {
const { syntaxBlue } = useSplunkTheme();
const colStyle: React.CSSProperties = {
border: `1px solid ${syntaxBlue}`,
padding: 10,
minHeight: 80,
};
return (
1
2
3
4
5
6
7
8
9
10
11
12
Span 4
Span 8
Span 2
Span 5
Span 5
Span 6
Span 3
Span 3
);
}
export default Basic;
```
### Gutters
Column Layout spaces Rows and Columns with gutters, but these can be removed or changed.
```typescript
import React from 'react';
import ColumnLayout from '@splunk/react-ui/ColumnLayout';
import Heading from '@splunk/react-ui/Heading';
import { useSplunkTheme } from '@splunk/themes';
function Gutters() {
const { syntaxBlue } = useSplunkTheme();
const colStyle: React.CSSProperties = {
border: `1px solid ${syntaxBlue}`,
padding: 10,
minHeight: 80,
};
const headingStyle: React.CSSProperties = {
margin: '1.414em 0 0.4em',
};
return (
8px gutter
1 of 2
2 of 2
1 of 3
2 of 3
2 of 3
0px gutter
1 of 2
2 of 2
1 of 3
2 of 3
2 of 3
);
}
export default Gutters;
```
### Dividers
Column Layout can show different types of dividers.
```typescript
import React from 'react';
import ColumnLayout from '@splunk/react-ui/ColumnLayout';
import Heading from '@splunk/react-ui/Heading';
import { useSplunkTheme } from '@splunk/themes';
function Dividers() {
const { syntaxBlue } = useSplunkTheme();
const colStyle: React.CSSProperties = {
border: `1px solid ${syntaxBlue}`,
padding: 10,
minHeight: 80,
};
const headingStyle: React.CSSProperties = {
margin: '1.414em 0 0.4em',
};
return (
Vertical dividers
1 of 2
2 of 2
1 of 3
2 of 3
2 of 3
Horizontal dividers
1 of 2
2 of 2
1 of 3
2 of 3
2 of 3
);
}
export default Dividers;
```
### Align Items
By default, the Columns grow vertically to fill the available space. The values for this property are the same as flexbox's align-items property.
```typescript
import React from 'react';
import ColumnLayout from '@splunk/react-ui/ColumnLayout';
import { useSplunkTheme } from '@splunk/themes';
function AlignItems() {
const { syntaxBlue } = useSplunkTheme();
const colStyle: React.CSSProperties = { border: `1px solid ${syntaxBlue}`, padding: 10 };
return (
A short column can stretch to fill the space.
A tall
column defines
the height
of the row.
Another
column.
A short column can align to the start (top) of the row.
A tall
column defines
the height
of the row.
Another
column.
A short column can align to the end (bottom) of the row.
A tall
column defines
the height
of the row.
Another
column.
A short column can align to the center (middle) of the row.
A tall
column defines
the height
of the row.
Another
column.
);
}
export default AlignItems;
```
## API
### ColumnLayout API
@deprecated
ColumnLayout has been deprecated and will be removed in a future major version. Use CSS `grid` or `flex` instead.
#### Props
| Name | Type | Required | Default | Description |
|------|------|------|------|------|
| children | React.ReactNode | no | | `children` must be `ColumnLayout.Row` elements. |
| divider | 'none' \| 'vertical' \| 'horizontal' | no | 'none' | Show dividers between columns. |
| elementRef | React.Ref | no | | A React ref which is set to the DOM element when the component mounts and null when it unmounts. |
| gutter | number | no | | Set gutter width in pixels. This is propagated down to its `children`. |
### ColumnLayout.Row API
#### Props
| Name | Type | Required | Default | Description |
|------|------|------|------|------|
| alignItems | 'start' \| 'end' \| 'center' \| 'stretch' | no | 'stretch' | Set vertical alignment of columns in a row |
| children | React.ReactNode | no | | `children` must be `ColumnLayout.Column` elements |
| elementRef | React.Ref | no | | A React ref which is set to the DOM element when the component mounts and null when it unmounts. |
### ColumnLayout.Column API
#### Props
| Name | Type | Required | Default | Description |
|------|------|------|------|------|
| children | React.ReactNode | no | | |
| elementRef | React.Ref | no | | A React ref which is set to the DOM element when the component mounts and null when it unmounts. |
| span | number | no | 1 | The number of columns the element spans. |